<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()"
        >查询</el-button
      >
    </el-form>
    <el-row>
      <!-- 统计用户登录 -->
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div
            class="grid-content bg-purple"
            id="login_num"
            style="height: 400px"
          ></div>
        </div>
      </el-col>
      <!-- 统计用户注册 -->
      <el-col :span="12">
        <div
          class="grid-content bg-purple"
          id="register_num"
          style="height: 400px"
        ></div>
      </el-col>
    </el-row>

    <el-row>
      <!-- 统计课程上线 -->
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div
            class="grid-content bg-purple"
            id="course_num"
            style="height: 400px"
          ></div>
        </div>
      </el-col>
      <!-- 统计视频播放 -->
      <el-col :span="12">
        <div
          class="grid-content bg-purple"
          id="video_view_num"
          style="height: 400px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
import { getInfo } from "../../api/statistics";

export default {
  data() {
    return {
      searchObj: {
        type: "",
        begin: "",
        end: "",
      },
      btnDisabled: false,
      chartData: {}, // 图表数据
    };
  },
  created() {},
  methods: {
    showEchart(type, title, data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(type));

      // 指定图表的配置项和数据
      let option = {
        title: [
          {
            left: "center",
            text: title,
          },
        ],
        xAxis: {
          data: data.yData,
        },
        yAxis: {},
        series: [
          {
            type: "line",
            data: data.xData,
            showSymbol: false,
          },
        ],
        tooltip: {
          trigger: "axis",
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 查询统计数据
    showChart() {
      let query = new URLSearchParams();
      query.append("begin", this.searchObj.begin);
      query.append("end", this.searchObj.end);
      getInfo(query).then((result) => {
        this.chartData = result.data;
        this.showEchart("course_num", "课程上线数量", result.data.course_num);
        this.showEchart("login_num", "用户登录数量", result.data.login_num);
        this.showEchart(
          "register_num",
          "用户注册数量",
          result.data.register_num
        );
        this.showEchart(
          "video_view_num",
          "视频播放数量",
          result.data.video_view_num
        );
      });
    },
  },
};
</script>
